<script setup>
import WorkTodoMenu from './work-todo-menu.vue';

const prop = defineProps({
  activeName: {
    type: String,
    default: 'todo',
  },
});

const { activeName } = toRefs(prop);

const menu = reactive([
  {
    title: '12222222222222333333333444444444444444',
    icon: 'ep:unlock',
    hasChild: true,
    children: [
      {
        hasChild: false,
        title: '12222222222222333333333444444444444444',
        badge: {
          value: 100,
        },
      },
    ],
    badge: {
      value: 100,
    },
  },
  {
    title: '2',
    icon: 'ep:unlock',
    hasChild: true,
    children: [
      {
        hasChild: false,
        title: '2-1',
      },
    ],
    badge: {
      value: 1,
    },
  },
]);
</script>

<template>
  <div class="wrapper">
    <div class="title">
      <iconify-icon
        class="title__icon"
        icon="mdi:format-list-checks"
        :width="14"
        :height="14"
        />
        <p class="title__label">{{ activeName === 'done' ? '事项分类筛选' : '待办事项筛选' }}</p>
    </div>
    <p class="menu__title">事项分类：</p>
    <work-todo-menu :menu="menu" default-active="1"></work-todo-menu>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  width: 284px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .title {
    height: 48px;
    background: #F6F8FA;
    display: flex;
    align-items: center;

    .title__icon {
      margin-left: 16px;
    }

    .title__label {
      margin-left: 9px;
      font-size: 14px;
      font-weight: 500;
      color: #25292C;
      line-height: 21px;
    }
  }

  .menu__title {
    margin: 12px 0 0 17px;
    font-size: 12px;
    font-weight: 400;
    color: #989DA3;
    line-height: 12px;
    background: #fff;
  }
}
</style>
